<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<c:if test="${not empty requestScope.movieCardsMap}">
    <c:set var="hasCardsData" value="true" scope="page"/>
    <c:set var="movieCardsMap" value="${requestScope.movieCardsMap}" scope="page"/>
</c:if>
<html lang="en" data-theme="dark">
<%--导入头部数据--%>
<%@include file="/include/head_libs.jsp" %>
<body class="min-h-screen bg-base-300">
<%--Navbar--%>
<jsp:include page="/include/web_header.jsp"/>
<div class="container mx-auto px-4">
    <%-- 轮播图 --%>
    <div class="carousel w-full rounded-box my-4 h-[400px] overflow-hidden">
        <div id="slide1" class="carousel-item relative w-full">
            <img src="https://obs.gduamoe.com/upload/banner/20241208-1/9e0e0d07ec38b68740855fe575a0d373.png?x-image-process=image/quality,q_65/format,webp"
                 class="w-full object-cover" alt="Img"/>
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent">
                <div class="absolute bottom-0 left-0 p-8">
                    <h2 class="text-3xl font-bold text-white mb-2">清明上河图密码</h2>
                    <p class="text-white/80">更新至20集</p>
                </div>
            </div>
            <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
                <a href="#slide4" class="btn btn-circle">❮</a>
                <a href="#slide2" class="btn btn-circle">❯</a>
            </div>
        </div>
        <div id="slide2" class="carousel-item relative w-full">
            <img src="https://obs.gduamoe.com/upload/banner/20241211-1/73ded3fda3679a565fff550da62ad74f.png?x-image-process=image/quality,q_65/format,webp"
                 class="w-full object-cover"/>
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent">
                <div class="absolute bottom-0 left-0 p-8">
                    <h2 class="text-3xl font-bold text-white mb-2">猎罪图鉴2</h2>
                    <p class="text-white/80">全新上线</p>
                </div>
            </div>
            <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
                <a href="#slide1" class="btn btn-circle">❮</a>
                <a href="#slide3" class="btn btn-circle">❯</a>
            </div>
        </div>
    </div>

    <c:if test="${hasCardsData == 'true'}">
        <c:forEach items="${movieCardsMap}" var="cardsMap">
            <div class="my-8">
                <div class="mb-4 flex items-center justify-between">
                    <h2 class="text-2xl font-bold">${cardsMap.key}</h2>
                    <a href="#" class="btn btn-ghost btn-sm hidden">更多 ></a>
                </div>
                <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
                    <c:forEach items="${cardsMap.value}" var="movieCard">
                        <a href="${ctx}/api/movie/detail?movieId=${movieCard.movieId}" class="card movie-card" style="max-height: none; max-width: none;!important;">
                            <figure class="relative pt-[140%]">
                                <img src="${movieCard.image}" alt="DetailImg"
                                     class="absolute inset-0 h-full w-full object-cover"/>
                                <c:choose>
                                    <c:when test="${movieCard.episode == '正片'}">
                                        <div class="absolute top-0 right-0 m-2 badge badge-primary">${movieCard.episode}</div>
                                    </c:when>
                                    <c:otherwise>
                                        <div class="absolute top-0 right-0 m-2 badge badge-accent">${movieCard.episode}</div>
                                    </c:otherwise>
                                </c:choose>
                            </figure>
                            <div class="p-2 card-body select-none">
                                <h3 class="text-sm card-title">${movieCard.title}</h3>
                                <p class="text-xs text-gray-400">${movieCard.genre}</p>
                            </div>
                        </a>
                    </c:forEach>
                </div>
            </div>
        </c:forEach>
    </c:if>
</div>

<%--Footer--%>
<jsp:include page="/include/footer_bar.jsp" flush="true"/>
<%--Theme controller--%>
<jsp:include page="/include/hover_theme_controller.jsp" flush="true"/>
</body>
</html>